<template>
  <div>
    <!-- 任务详情对话框 -->
    <el-dialog :title="taskDetailRes.title" :visible.sync="detailOpenRes" width="50%" @close="cancelDetail">
      <el-tabs v-model="tabName">
        <el-tab-pane label="任务详情" name="taskDetail">
          <el-descriptions :column="2" :border="true" :label-style="LS">
            <el-descriptions-item label="任务名称" :span="2">{{ taskDetailRes.title }}</el-descriptions-item>
            <el-descriptions-item label="具体任务" :span="2">{{ taskDetailRes.taskInfo }}</el-descriptions-item>
            <el-descriptions-item label="任务图片" :span="2">
           <span v-if="taskDetailRes.taskImageList!==null&&taskDetailRes.taskImageList.length>0" v-for="(item,index) of taskDetailRes.taskImageList">
            <el-image style="width: 100px; height: 100px; margin-left: 10px;" :src="item" :preview-src-list="taskDetailRes.taskImageList" :z-index="9999"/>
          </span>
            </el-descriptions-item>
            <el-descriptions-item label="发布人员" :span="1">{{ taskDetailRes.publishUserName }}</el-descriptions-item>
            <el-descriptions-item label="联系方式" :span="1"><span style="color: dodgerblue">{{ taskDetailRes.contactInformation }}</span></el-descriptions-item>
            <el-descriptions-item label="任务类型" :span="1">
              <dict-tag :options="dict.type.task_type" :value="taskDetailRes.type"/>
            </el-descriptions-item>
            <el-descriptions-item label="是否置顶" :span="1">
              <dict-tag :options="dict.type.is_to_top" :value="taskDetailRes.isToTop"/>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间" :span="2">{{ taskDetailRes.createTime }}</el-descriptions-item>
            <el-descriptions-item label="审核人员" :span="1">{{ taskDetailRes.reviewUserName }}</el-descriptions-item>
            <el-descriptions-item label="审核状态">
              <dict-tag :options="dict.type.task_review_status" :value="taskDetailRes.reviewStatus"/>
            </el-descriptions-item>
            <el-descriptions-item v-if="taskDetailRes.reviewStatus===98" label="驳回原因" :span="3">{{ taskDetailRes.reviewRejectionReason }}</el-descriptions-item>
            <el-descriptions-item label="审核时间" :span="2">{{ taskDetailRes.reviewTime }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="评论详情" name="commentDetail">
          <!-- 评论列表 -->
          <el-tree :data="commentList" :props="defaultProps" :render-content="renderContent" @node-click="handleNodeClick" :indent="50"></el-tree>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>

import {listByTaskId} from '@/api/task/comment'

export default {
  name: 'TaskDetail',
  dicts: ['is_to_top', 'task_type', 'task_review_status'],
  props: {
    detailOpen: {                                                           // 任务详情开关
      type: Boolean,
      default: false
    },
    taskDetail: {                                                           // 任务详情
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      detailOpenRes: false,
      taskDetailRes: {},
      tabName: 'taskDetail',
      LS: {
        'min-width': '110px',
        'word-break': 'keep-all'
      },
      commentList: [],
      defaultProps: {
        children: 'commentReply',
        label: 'comment'
      }
    }
  },
  created() {
  },
  methods: {
    cancelDetail: function () {
      this.detailOpenRes = false
      this.$emit('cancelDetail', this.detailOpenRes)
    },
    handleNodeClick(data) {
    },
    getListByTaskId: function (taskId) {
      listByTaskId(taskId).then(response => {
        this.commentList = response.data
      })
    },
    renderContent: function (h, {node, data, store}) {
      let fromUserName = data.fromUserName
      let fromUserMobile = data.fromUserMobile
      let fromUserAvatar = data.fromUserAvatar
      let toUserName = data.toUserName
      let toUserMobile = data.toUserMobile
      let toUserAvatar = data.toUserAvatar
      let createTime = data.createTime
      let comment = data.comment
      if (node.level === 1) {
        return (
          <span>
              <span style="display:flex;align-items:center">
                <img style="width:30px;height:30px;border-radius:50%" src={fromUserAvatar}/>
                <span style="margin-left:5px;font-size:15px;font-weight:bold;">{fromUserName} <span style="color:dodgerblue;font-size:12px;">{fromUserMobile}</span></span>
              </span>
              <span style="margin-left:30px;font-size:12px;color:gray">
                {createTime}
              </span><br/>
              <div style="margin-top:5px;"></div>
              <span style="margin-left:30px;font-size:16px;">
              {comment}
              </span>
            </span>
        )
      } else if (node.level === 2) {
        return (
          <span>
              <span style="display:flex;align-items:center">
                <img style="width:30px;height:30px;border-radius:50%" src={fromUserAvatar}/>
                <span style="margin-left:5px;font-size:15px;font-weight:bold;">{fromUserName} <span style="color:dodgerblue;font-size:12px;">{fromUserMobile}</span></span>
                <span style="margin-left:5px;font-size:15px;font-weight:bold;color:dodgerblue">@</span>
                <img style="width:30px;height:30px;border-radius:50%;margin-left:5px" src={toUserAvatar}/>
                <span style="margin-left:5px;font-size:15px;font-weight:bold;">{toUserName} <span style="color:dodgerblue;font-size:12px;">{toUserMobile}</span></span>
              </span>
              <span style="margin-left:30px;font-size:12px;color:gray">
                {createTime}
              </span><br/>
              <div style="margin-top:5px;"></div>
              <span style="margin-left:30px;font-size:16px;">
              {comment}
              </span>
            </span>
        )
      }
    }
  },
  watch: {
    detailOpen: function () {
      this.detailOpenRes = this.detailOpen
    },
    taskDetail: function () {
      this.taskDetailRes = this.taskDetail
      if (this.detailOpen) this.getListByTaskId(this.taskDetail.id)
    }
  }
}
</script>

<style scoped lang="css">
/* 调整树组件每个节点的上下间距 */
>>> .el-tree .el-tree-node__content {
  padding-top: 40px; /* 调整为你想要的值 */
  padding-bottom: 50px; /* 调整为你想要的值 */
}
</style>
